<mat-form-field id="search-input">
  <input matInput placeholder="Look for a hero!" i18n-placeholder="@@findHero"
         [matAutocomplete]="heroesAutocomplete" [formControl]="heroFormControl">
</mat-form-field>

<mat-autocomplete #heroesAutocomplete="matAutocomplete">
  <mat-option *ngFor="let hero of filteredHeroes"
              [value]="hero.name">
    <a class="hero-link" [routerLink]="[routesConfig.routes.heroes.detail(hero.id)]">
      {{hero.name | capitalizefirst}}
    </a>
  </mat-option>
</mat-autocomplete>
